<!--
 * @Date: 2022-03-26 14:53:18
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-26 15:47:28
 * @FilePath: \vue3Components\src\components\progress\Progress.vue
 * @Description: something
-->
<template>
  <el-progress :percentage="t" :indeterminate="indeterminate">
    <!-- <template #default> -->
    <slot></slot>
    <!-- </template> -->
  </el-progress>
</template>
 <script lang='ts' setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
  percentage: {
    type: Number,
    required: true
  },
  indeterminate: {
    type: Boolean,
    default: false
  },
  isAnimation: {
    type: Boolean,
    default: false
  },
  //动画时长
  time: {
    type: Number,
    default: 5000
  }
})
let t = ref(0)
onMounted(() => {
  if (props.isAnimation) {
    let speed = Math.ceil((props.time) / (props.percentage))
    let timer = setInterval(() => {
      t.value++
      if (t.value >= props.percentage) {
        t.value = props.percentage
        clearInterval(timer)
      }
    }, speed)
  } else {
    t.value = props.percentage
  }
})
</script>
<style lang='less' scoped>
</style>